<!--
 工作流-信息节点卡片
 @Author: zhanbh
 @Date: 2021-04-09
-->
<template>
  <div class="info-card">
    <!-- 卡片头部 -->
    <header class="info-card__header" :class="cardTypeObj.topClass">
      <i class="dg-iconp" :class="cardTypeObj.icon"></i>
      <span>{{ cardTypeObj.typeText }}</span>
    </header>

    <!-- 卡片信息主题 -->
    <main class="info-card__main">
      <div v-translate="{ code: BM_DEPT, value: creator }"></div>
      <div class="info-card__info" v-if="+zlsjlx === 2">
        <p class="info-card__text">{{ nr | filterText }}</p>

        <!-- 更多的浮层 -->
        <el-popover popper-class="info-card__popover" placement="right" trigger="hover">
          <span slot="reference" class="info-card__more">更多 ></span>
          <ul class="info-card__info-list">
            {{
              nr
            }}
            <!-- <li v-for="(info, index) of infoList" :key="index">{{ info }}</li> -->
          </ul>
        </el-popover>
      </div>

      <!-- 卡片底部状态跟时间信息 -->
      <div class="info-card__footer">
        <span
          class="info-card__status"
          :class="cardTypeObj.statusClass"
          v-translate="{ code: cardTypeObj.code, value: status }"
        ></span>
        <!-- <span v-if="time" class="info-card__time">({{ time }})</span> -->
      </div>
    </main>
  </div>
</template>
<script>
import { BM_QSZT, BM_FKZT, BM_DEPT } from '@/common/codeDic';

export default {
  name: 'InfoCard',
  props: {
    creator: String,
    nr: String,
    time: [Date, String, Number],
    status: String, // error, success, info
    zlsjlx: String
  },
  data() {
    return {
      BM_DEPT,
      BM_QSZT,
      BM_FKZT
    };
  },
  computed: {
    cardTypeObj() {
      // zlsjlx : 0-指令 1-签收 2-反馈
      // <!-- 签收状态/反馈状态：zt(签收状态：0-未签收；1-已签收; 反馈状态：0-未反馈；1-按时反馈；2-超时反馈) -->
      let obj = {};
      if (+this.zlsjlx === 1) {
        obj = {
          typeText: '签收单位',
          icon: 'iconp-l-qianshou',
          code: BM_QSZT,
          topClass: ''
        };
      } else {
        obj = {
          typeText: '反馈单位',
          icon: 'iconp-l-fankui',
          code: BM_FKZT,
          topClass: 'is-back'
        };
      }
      obj.statusClass = +this.status === 1 ? 'is-success' : 'is-error';
      return obj;
    }
  },
  methods: {},
  created() {}
};
</script>

<style scoped lang="scss">
@import '../variable';

.info-card {
  width: 16.125rem;

  font-size: 0.875rem;
  overflow: hidden;

  &__header {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    background-color: $--info;
    border-top-right-radius: 1rem;
    &.is-back {
      background-color: $--back-info;
    }
  }

  &__main {
    padding: 1rem 1.5rem;
    border: solid 1px #d2d2d2;
    border-top: none;
  }
  &__info {
    position: relative;

    font-size: 0.875rem;
    line-height: 1.8;
  }
  &__text {
    font-size: 0.875rem;
    height: 3.15rem;
    color: #808080;
    overflow: hidden;
  }
  &__more {
    position: absolute;
    right: 0;
    bottom: 0;

    padding-left: 4px;
    background-color: #fff;

    color: $--info;
  }
  &__info-list {
    font-size: 0.875rem;
    line-height: 1.8;
    color: #474747;
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 -5px 0;
    white-space: nowrap;
  }
  &__status {
    color: $--info;
  }
  &__status.is-error {
    color: $--error;
  }
  &__status.is-success {
    color: $--success;
  }
  &__time {
    color: #808080;
  }
}
</style>
<style lang="scss">
.info-card__popover {
  min-width: 12rem;
  max-width: 22rem;
}
</style>
